
<script>
import {inject} from "vue";
import StarHorseFormList from '@/components/comp/StarHorseFormList';

export default {
  name: "StarHorseForm",
  components: {StarHorseFormList},
  props: {
    fieldList: {type: Array, required: true},
    rules: {type: Object, required: true}
  },
  setup() {
    const dataForm = inject("dataForm");
    return {
      dataForm
    }
  }
}
</script>

<style scoped>

</style>
<template>
  <el-form :model = "dataForm" :rules = "rules" class = "data-form" ref = "starHorseFormRef">
    <template v-for = "item in fieldList.fieldList">
      <el-form-item :label = "item.label " :required = "item.required" :prop = "item.fieldName" v-if = "item.formShow">

        <el-input v-if = "item.type==='textarea'" type = "textarea" clearable v-model = "dataForm[item.fieldName]"
                  :placeholder = "'请输入'+item.label"></el-input>

        <el-input-number v-else-if = "item.type==='number'" clearable v-model = "dataForm[item.fieldName]"
                         :placeholder = "'请输入'+item.label"></el-input-number>

        <el-select v-else-if = "item.type==='select'" clearable v-model = "dataForm[item.fieldName]"
                   :placeholder = "'请选择'+item.label">
          <el-option v-for = "sitem in item.optionList" :value = "sitem.value" :label = "sitem.label"
                     :key = "sitem.value"/>
        </el-select>
        <el-date-picker v-else-if = "item.type==='date'" clearable v-model = "dataForm[item.fieldName]" type = "date"
                        :placeholder = "'请选择'+item.label">
        </el-date-picker>
        <el-input v-else clearable v-model = "dataForm[item.fieldName]"
                  :placeholder = "'请输入'+item.label"></el-input>
      </el-form-item>
    </template>
    <star-horse-form-list
        ref = "mergeDataFormBatchRef"
        :field-list = "fieldList.batchFieldList"
        :rules = "rules"
    />
  </el-form>
</template>
